前言

以 JavaScript 當主題也許不是很酷很新穎也很多人寫過，但它對身為前端的我們來說是很重要的語言，所以這次鐵人賽的系列文就是要給已經瞭解 JavaScript 基礎語法，想再鞏固基礎並更上一層樓的 JavaScript 開發者所做的主題，同時也是複習自己以前學習過的東西。

以下就來看一下這個系列大概會介紹什麼東西吧!希望大家學習後都能有所收穫喔~

系列文大綱

Day1-系列大綱 & 前言

• 介紹這個系列會介紹哪些內容

Day2-JavaScript Engine 介紹

• 介紹 JS Engine 的作用
• 淺談 JS Engine 運作過程
• 介紹 JS Engine 的內部機制

Day3-JavaScript 記憶體管理

• 介紹 JS Garbage Collection 機制
• Memory Leak 範例
• 如何在 Chrome DevTools 檢視 Memory Leak 狀況

Day4-JavaScript Runtime Environment 觀念

• 介紹 Task Queue、Job Queue、Event loop...等
• 觀念題目練習

Day5-JavaScript Execution Context & Hoisting & Scope Chain

• 圖解 Execution Context
• 介紹 Hoisting、Scope Chain

Day6-JavaScript Execution Context & var/let/const

• 圖解 Execution Context 並加入 var/let/const 做說明

Day7-閉包(Closure)介紹

• 介紹閉包
• 閉包的應用

Day8-JavaScript this 關鍵字

• this 在各種情況下的指向的值
• this 的應用

Day9-箭頭函式與 this

• 認識箭頭函式調用 this 的指向
• 介紹箭頭函式不適合的使用情況

Day10-call()、apply() 函式介紹 & 實作

• call()、apply() 語法介紹
• call() & apply() 使用範例
• 實作 call() 函式

Day11-bind() 函式介紹 & 實作

• 介紹 bind() 語法
• bind() 使用範例
• 實作 bind() 函式

Day12-介紹 Currying、Partial Application

• 介紹 Curring(柯里化)
• 介紹 Partial Application(或稱偏函數)
• bind() 使用於柯里化 & 偏函數
• 柯里化範例

Day13-原型繼承與原型鏈

• 介紹繼承和原型繼承
• 從範例和圖解了解原型繼承
• 圖解原型鏈(Prototype Chain)
• [[Prototype]] vs __proto__

Day14-ES6 Class 繼承

• 從範例認識 Class 和相關關鍵字
• JS 新語法 - # 建立私有變數、私有方法
• 其餘延伸議題

Day15-Object.create() 介紹

• 介紹 Object.create() 語法
• 圖解 Object.create() 使用範例
• 其餘範例與練習題

Day16-instanceof 介紹

• 介紹 instanceof 語法
• 圖解 instanceof 使用範例
• 使用 instanceof 判定型別
• 實作 instanceof

Day17-JavaScript Promise 系列-認識 Promise

• 介紹 Promise 語法
• 介紹 Promise.prototype.then()
• 介紹 Promise.prototype.catch()
• 介紹 Promise.prototype.finally()
• Promise 鏈式寫法
• 介紹 Promisification(Callback 轉成 Promise)

Day18-JavaScript Promise 系列-Promise 的幾個靜態方法介紹

• 介紹 Promise.all() 語法、範例和實作
• 介紹 Promise.allSettled()
• 介紹 Promise.race() 語法、範例和實作
• 介紹 Promise.resolve() 和 Promise.reject()

Day19-JavaScript Promise 系列-更多關於 Promise 的練習

• 分享幾個關於 Promise 的練習題

Day20-非同步處理的方式-async/await

• 介紹 async/await 語法
• 介紹 async/await 範例

Day21-非同步處理方式-Generator

• 介紹 Iterator 疊代器和範例
• 介紹 Generator 產生器和範例

Day22-了解 Memoization 機制

• 介紹 JS Memoization 的一些範例

Day23-JavaScript 的 Set/Map 資料結構

• 介紹 Set(集合)語法、特性與應用範例
• 介紹 Map 語法、特性與應用範例

Day24-JavaScript 的 WeakSet & WeakMap 資料結構

• 介紹弱引用(weakly reference)觀念
• 介紹 WeakMap
• 介紹 WeakSet

Day25-認識與實作 Debounce 和 Throttle

• Debounce 防抖介紹與實作
• Throttle 節流介紹與實作

Day26-瞭解 JS 的淺拷貝(Shallow Copy) & 深拷貝(Deep Copy)

• 介紹淺拷貝 & 深拷貝
• 陣列/物件的淺拷貝 & 深拷貝方式

Day27-JavaScript 的型別轉換

• 介紹原始型別的顯性強制轉型和隱性強制轉型
• == 和 === 比較
• 其他型別轉換的函式 - valueOf() & toString()

Day28-寫出更好的 JavaScript 程式碼(上)

• 分享一些 Clean Code 和寫 JS 的技巧

Day29-寫出更好的 JavaScript 程式碼(下)

• 分享一些 Clean Code 和寫 JS 的技巧

Day30-來看看 JavaScript 在 ES7~ES13 的幾個新特性

• 淺談 ES7~ES13 的幾個重點語法
• 鐵人賽總結

以上就是整個鐵人賽系列文的大綱，如果這個系列的文章對你有幫助的話，歡迎幫文章點個 like!

另外要準備 30 天的文章內容實在繁多，若有哪裡不小心寫錯或是有任何能讓文章更好的建議都歡迎留言告知!感恩~